<template>
  <div class="sdy-categroy">
    <SdyHeader title="啥都有" back>sousuo</SdyHeader>
    <div class="left">
      <van-sidebar v-model="index" @change="slideChangeHandler">
        <van-sidebar-item v-for="item in categoryList" :title="item" />
      </van-sidebar>
    </div>
    <div class="content">
      <div class="item" v-for="item in goodsList">
        <p class="title">{{ item.brand }}</p>
        <ul>
          <li v-for="t in item.list">
            <img :src="t.img1" alt="">
            <span>名称</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 导入商品列表接口
import { categoryListApi, cateBrandlistApi, categortBrandGoodsListApi } from '@/api/goods'
// 导入相关 ts 接口
import type { MyCateBrandGoodsItem } from '@/config/interface'
// 导入分类列表相关的 ts 接口
// import  {  } from '@/config/interface'

const index = ref<number>(0)

// 准备一个右侧内容渲染的数组
const goodsList = ref<MyCateBrandGoodsItem[]>([])

// 准备一个根据当前分类请求内所有相关数据的方法
const getGoodsList = async (cate: string) => {
  console.log(cate);
  //1. 有多少个品牌 brandlist
  const brandlist = await cateBrandlistApi(cate)
  console.log(brandlist);
  // 2.根据品牌列表内的内容，来请求商品列表
  const list: Promise<any>[] = []
  brandlist.data.forEach((item: { brand: string }) => {
    list.push(categortBrandGoodsListApi({ category: cate, brand: item.brand }))
  });
  // 每个品牌下的商品
  const goods = await Promise.all(list)
  // console.log(goods);


  //3. 组装数据渲染页面
  const res: MyCateBrandGoodsItem[] = []
  brandlist.data.forEach((item: { brand: string }, index: number) => {
    res.push({
      cate,
      brand: item.brand,
      list: goods[index].data
    })
  })
  goodsList.value = res
  console.log(res);

}

// 准备 一个 分类列表 数组
const categoryList = ref<string[]>([])
//  left 导航切换事件
const slideChangeHandler = async (index: number) => {
  // index 表示当前索引
  // 只要从 categoryList 拿到对应的索引即可 
  const cate = categoryList.value[index]

  // console.log(brandlist);
  getGoodsList(cate)

}
onMounted(async () => {
  const res = await categoryListApi()
  categoryList.value = res.data
  // 在渲染完毕以后
  getGoodsList(res.data[0])
})

</script>

<style scoped lang="scss">
.sdy-categroy {
  display: flex;
  height: 100%;

  >.left {
    height: 100%;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 0;
    }
  }

  >.content {
    flex: 1;
    overflow: auto;


    >.item {
      >.title {
        height: 30px;
        font-weight: 700;
      }

      >ul {
        display: flex;
        box-sizing: border-box;
        padding: 15px;
        justify-content: space-evenly;

        li {
          display: flex;
          flex-direction: column;
          align-items: center;

          >img {
            width: 50px;
            height: 50px;
            display: block;
          }
        }
      }
    }
  }
}
</style>